<template>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
    <div v-for="(card, index) in cards" :key="index" :class="['p-4', card.bgColor, 'rounded-lg', 'border', card.borderColor]">
      <h4 :class="['font-semibold', card.titleColor, 'mb-2']">
        {{ card.title }}
      </h4>
      <p class="text-sm text-gray-700">
        {{ card.content }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardBlock',
  props: {
    cards: {
      type: Array,
      required: true
    }
  }
};
</script>

<style scoped>
/* 组件样式可以在这里添加 */
</style>